<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>test - booklet</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <link href="vendor/booklet/jquery.booklet.latest.css" rel="stylesheet" />
        <script src="vendor/jquery-1.9.1.js" type="text/javascript" > </script>
        <script src="vendor/booklet/jquery.easing.1.3.js" type="text/javascript"> </script>
        <script src="vendor/booklet/jquery.booklet.latest.js" type="text/javascript" > </script>
        <script src="vendor/booklet/jquery-ui-1.10.4.min.js" type="text/javascript" > </script>
        
        <style type="text/css">
           /* #ubook div:nth-child(odd){display: none;}*/
        </style>
        <script type="text/javascript">
             $(function(){
                $("#mybook").booklet({height:600,width:800});
                $("#ubook").booklet({
                    height:500,
                    width:'80%',
                    startingPage: 1,    //初始页面，从0开始数
                    pageNumbers: true,
                    
                     closed: false,    //初始化时是否处于合上的状态
                     
                     closedFrontTitle: "Start",  //页数导航内文字，需要定义menu的 ID
                     closedBackTitle: "End" ,
                     closedBackChapter: "End of Book",
                     closedFrontChapter: "Start of Book" ,
                     
                     manual: false,  // ！！是否支持鼠标移动到边缘卷页
                     hovers: false,  //卷页预览下一页的部分内容
                     hoverWidth: 150,  //鼠标移到边缘卷页宽度
                     hoverSpeed: 1000 ,  //鼠标移到边缘卷起部分页速度
                     hoverTreshold: 0.25,   //支持拖拽
                     hoverClick: true,     //支持点击翻页
                     tabs: true,    //是否显示上下翻页按钮  
                     tabWidth: 100 ,
                     tabHeight: 30,
                     
                     nextControlText: "Forward" , //初始界面下一页按钮的名称
                     previousControlText: "Back" ,
                     nextControlTitle: "Forward" ,  // default:Next Page
                     previousControlTitle: "Back" ,  //default:Previous Page
                     arrows: true , // Adds arrow overlays on the sides of the booklet
                     arrowsHide: true,   //Auto hide the arrows when the controls are not hovered
                    // cursor: "move" ,  // Default:  "pointer"
                     hash: true ,
                     hashTitleText: " - " , // Default: " - Page"
                     next: "#customNext" , // deffault null
                     prev: "#customPrev"  ,
                     
                     //auto: true ,    //自动翻页.Requires delay option
                     //delay: 1000,  //default:5000
                     pause: "#customPause" ,  //null
                     play: "#customPlay" ,
                     menu: "#customMenu" ,
                     pageSelector: true,  //false  是否显示页码选择按钮
                     chapterSelector: true ,  //章节选择按钮，其实就是选开始与结束，除非在HTML5中定义section
                     shadows: false , //true
                     shadowTopFwdWidth: 100 , //166
                     shadowTopBackWidth: 100 ,
                     shadowBtmWidth: 50 , //50
                     
                    });
            });
        </script>
    </head>
    <body>

    <h1>this is header!</h1>
    
    <div class="booklet" id="mybook">
    <div class="b-page b-page-0 b-p1">
        <div class="b-wrap b-wrap-left">
            <h1> page 1</h1>
        </div>
    </div>
    <div class="b-page b-page-1 b-p2">
        <div class="b-wrap b-wrap-right">
            ...  <h1> page 2</h1>
        </div>
    </div>
    <div class="b-page b-page-2 b-p3">
        <div class="b-wrap b-wrap-left">
            ...  <h1> page 3</h1>
        </div>
    </div>
    <div class="b-page b-page-3 b-p4">
        <div class="b-wrap b-wrap-right">
            ...  <h1> page 4</h1>
        </div>
    </div>
    
    <div class="b-controls">
            <span>  controller </span>
        </div>
    
</div>
<br /> 
<!--<span id="customPause"> </span> <span id="customPlay"> </span>-->
<div id="customMenu"> </div>
<div id="ubook">
    <div> 
        <h3>Yay, Page 1!</h3>
    </div>
    <div> 
        <h3>Yay, Page 2!</h3>
    </div>
    <div> 
        <h3>Yay, Page 3!</h3>
    </div>
    <div> 
        <h3>Yay, Page 4!</h3>
    </div>
    <div> 
        <h3>Yay, Page 5!</h3>
    </div>
    <div> 
        <h3>Yay, Page 6!</h3>
    </div>
    <div> 
        <h3>Yay, Page 7!</h3>
    </div>
</div>

    </body>
</html>
